<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<style type="text/css">
/* Common */
* {margin:0px;padding:0px;outline:none;border:none;text-decoration:none;font-family:'Microsoft Yahei';}

html,body {width:100%;height:100%;overflow:hidden;}

a {color:inherit;}


/* 整体容器 */
#container {position:absolute;top:0;right:0;bottom:0;left:0;width:100%;min-width:960px;min-height:480px;}


/* 顶部logo + 登录 */
#top {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 54px;
	padding: 0 12px;
	background: #4CA9EE;
	background-image: -webkit-linear-gradient(90deg, #4CA9EE,#0840CE);
	z-index:999;
}

#login {
	position: absolute;
	right: 20px; top: 20px;
	color: #E0EDFF;
	font-size: 14px;
	height: 16px;
	line-height: 18px;
	display: block;
	background: url(img/login.png) no-repeat center left;
	padding-left:20px;
}
#login:hover {color:#fff;}

/* 顶部包含下拉框 的 div */
#selectors {
	position: absolute;
	top: 54px;
	right: 0;
	left: 0;
	height: 32px;
	line-height: 32px;
	background: #E8EAED;
	font-size: 14px;
	padding: 0 12px;
	z-index: 999;
}
  /* 下拉框样式 */
#selectors select {border:1px solid #C3CED5;border-radius:2px;padding:0 2px;width:72px;}
  /* 视图 */
#slt_area,#slt_grid {margin-right:12px;}


/* 地图 */
#map {position:absolute;top:86px;right:300px;bottom:0;left:0;border:1px solid #98A7AF;}


/* 右侧筛选 */
#filter {
	position: absolute;
	top: 86px;
	right: 0;
	bottom: 0;
	width: 300px;
	overflow: hidden;
	background: #F7F7F7;
	font-size: 14px;
	padding: 10px;
	box-sizing: border-box;
	transition: height .23s;
}

/* 筛选标题 flt == filter */
.flt_title {height:28px;line-height:28px;cursor:pointer;padding:0 8px;background:#71BCF7;color:#fff;border-radius:4px;margin-bottom:6px;}
.flt_title::before {content:'+';width:16px;display:inline-block;text-align: center;font-size:16px;}
.flt_title.hover {background:#62A7E0;}
.flt_title.hover::before {content:'-';}
.flt_title:hover {background:#62A7E0;}
.flt_title:active {background:#266FDC;}
.flt_title span {float:right;font-weight:normal;font-size:12px;}

/* 筛选块 包含 input 和 label */
.filters {margin:4px 0;display:none;}
.filters input {margin:0 4px;}
.filters label {height:24px;line-height:24px;cursor:pointer;display:block;}
.filters label:hover {background:#efefef;}

/* 筛选块vocs 有搜索框 单独处理 */
#flt_v {height:300px;overflow:hidden;overflow-y:scroll;}
#flt_v_all_l {margin-top:12px;}  /* vocs中 第一个全选（flt_v_all）的 label；由于搜索框的存在，要往下去 */

/* vocs 搜索框 */
#search_input {position:absolute;width:200px;height:24px;line-height:24px;border:1px solid #efefef;background:#fafafa;border-radius:2px;padding-left:6px;margin-bottom:8px;box-shadow:0 0 16px #d9d9d9;}
#search_input:focus {background:#fff;border:1px solid #DBDBDB;}
#search_res {position:absolute;right:24px;font-size:14px;line-height:30px;margin-right:10px;color:#808080;}

/* 提交查询按钮 和上面的搜索框并无关联 */
#search_btn {height:36px;line-height:34px;cursor:pointer;padding:0 8px;background:#fff;background:-webkit-linear-gradient(270deg,#fff,#f0f0f0);color:#363636;border:1px solid #DBDBDB;box-sizing:border-box;border-radius:4px;margin-top:32px;text-align:center;}
#search_btn:hover {border:1px solid #71BCF7;}
#search_btn:active {border:1px solid #DBDBDB;color:#808080;background:#f0f0f0;}

/* 查询提示 */
#search_tip {color:#C3CED5;font-size:12px;line-height:24px;text-align:center;margin-top:8px;border-radius:4px;}
#search_tip.on {color:#fff;text-shadow:1px 1px 1px #C48E00;background:#FFB700;}


/* 数据展示框 */
#chart {
	position:absolute;
	bottom: 0;
	left: -480px;
	width: 420px;
	/*height: 240px;*/
	background: rgba(255,255,255,.92);
	border: 1px solid #C1C1C1;
	border-top-right-radius: 4px;
	padding: 6px 16px 16px 16px;
	z-index: 99;
}

#chart p {
	padding-left:12px;
	border-left: 4px solid #62A7E0;
	height: 16px;
	line-height: 16px;
	font-size: 14px;
	margin-top: 6px;
}

#chart_off{float:right;color:#62A7E0;cursor:pointer;}

#chart_tab {
	height: 24px;
	line-height: 22px;
	margin: 8px 0 4px 0;
	border-bottom: 1px solid #D8D8D8;
	box-sizing: border-box;
}

#chart_tab span {
	display: inline-block;
	height: 22px;
	font-size: 12px;
	padding: 0 6px;
	border: 1px solid transparent;
	border: 1px solid transparent;
	border-top-right-radius: 3px;
	border-top-left-radius: 3px;
	top: 1px;
	margin-right: 4px;
	cursor: pointer;
}
#chart_tab span:hover{background: #D8D8D8;}
#chart_tab span.on {border: 1px solid #d8d8d8;border-bottom: 1px solid #fff;background: #fff;}

#charts {width:100%;height:148px;}


#mask {position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,0.5);z-index:999;display:none;}


</style>
<body>
<div id="container">



<!-- 顶部logo + 登入 -->
	<div id="top">
		<img src="dataManage/images/logo.png" />
		<a id="login" href="javascript:;">管理员登录</a>
	</div>



<!-- 视图选择 -->
	<div id="selectors">
		<div style="float:right;"><!-- 居右显示 -->

		行政区域：<select id="slt_area"> <option>加载中</option> </select>
		网格视图：<select id="slt_grid"> <option value="0">不使用</option><option value="10">10km</option><option value="20">20km</option><option value="30">30km</option><option value="50">50km</option> </select>

	请选择时间段：<select id="slt_start"> <option>加载中</option> </select>
		年初 至 <select id="slt_end"> <option>加载中</option> </select> 年底

		</div>
	</div><!-- selectors -->



<!-- 地图 -->
	<div id="map"></div>



<!-- 右侧筛选 -->
	<div id="filter">

		<h4 class="flt_title">污染源类型<span id="flt_o_tip">已全选</span></h4>
		<div class="filters" id="flt_o">抱歉，加载失败，请刷新重试
	<!-- <label for="flt_o_all"><input type="checkbox" id="flt_o_all" class="check_all"  checked />全部</label>
			<label for="flt_o_01"><input type="checkbox" id="flt_o_01" class="check_list" checked />固定源</label>
			<label for="flt_o_02"><input type="checkbox" id="flt_o_02" class="check_list" checked />移动源</label> -->
		</div>

		<h4 class="flt_title">行业类型<span id="flt_i_tip">已全选</span></h4>
		<div class="filters" id="flt_i">抱歉，加载失败，请刷新重试
	<!-- <label for="flt_i_all"><input type="checkbox" id="flt_i_all" class="check_all"  checked >全部</label>
			<label for="flt_i_01"><input type="checkbox" id="flt_i_01" class="check_list" checked />炼焦及石化</label>
			<label for="flt_i_02"><input type="checkbox" id="flt_i_02" class="check_list" checked />表面涂装</label> -->
		</div>

		<h4 class="flt_title">VOCs 种类<span id="flt_v_tip">已全选</span></h4>
		<div class="filters" id="flt_v">抱歉，加载失败，请刷新重试
		<!--<input type="input" id="search_input" placeholder="查找 VOCs"><br>
			<label for="flt_v_all" id="flt_v_all_l"><input type="checkbox" id="flt_v_all" class="check_all"/ checked >全部</label>
			<label for="flt_v_01"><input type="checkbox" id="flt_v_01" class="check_list" checked />苯</label>
			<label for="flt_v_02"><input type="checkbox" id="flt_v_02" class="check_list" checked />甲苯</label> -->
			<!-- <div style="height:248px;"></div> --><!-- 填充底部 使父元素撑开 满足滚动 -->
		</div>

		<p id="search_btn" />查询</p>
		<p id="search_tip">每种类型至少选择一项</p>

	</div><!-- filter -->


<!-- 数据展示框 -->
	<div id="chart">

		<p>地名：<span id="chart_name">四川</span><span id="chart_off">隐藏</span></p>
		<p>总量：<span id="chart_num">8000 t</span></p>

		<div id="chart_tab"><span>污染源类型</span><span>行业类型</span><span>VOCs 种类</span></div>
		
		<div id="charts"></div>

	</div>


<!-- 遮罩 -->
	<div id="mask"></div>



</div><!-- container end -->
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=FaLFUmkxj3VnWuu2DtmRX74v"></script>
<script src="js/echarts.common.min.js"></script>
<script>

// 请求路径
var www = 'http://localhost:8181';
// var www = '';



// ------------------------------------------------------------------------------------------ 图表、地图初始化
// 初始化图表
var chart = echarts.init(document.getElementById('charts'));

// 初始化地图
var map = new BMap.Map("map");
var point = new BMap.Point(104.071805,30.666348);
map.centerAndZoom('四川省', 7);
map.enableScrollWheelZoom();
map.addControl(new BMap.NavigationControl());
 // 隐藏路网
map.setMapStyle({styleJson:[{"featureType":"road","elementType":"all","stylers":{"color":"#ffffff","visibility":"off"}}]});

BMap.Polygon.prototype.setId = function(id) {this.id = id;};



// ------------------------------------------------------------------------------------------ 下拉框、复选框初始化
// 加载行政区域
var    ids_province = [];
var points_province = [];
var colors_province = [];

$.ajax({
	type: 'GET', async: false, dataType: 'json',
	url: www + '/VocsDataServer/F_GetDistrictJson',
	success: function(data){
		// console.log('行政区个数：'+data.length);
		var html = '<option value="">四川省</option>';

		for(var i=0;i<data.length;i++){
			html += '<option value="'+ data[i].addi_id+data[i].addi_name +'">' + data[i].addi_name + '</option>';
			points_province.push(data[i].addi_loc_str);
			ids_province.push(data[i].addi_id);
		}

		$('#slt_area').html(html);

		updateMap(ids_province,points_province,colors_province,'四川省');

	}
});


// 添加污染源 复选框
var aOrigins = [];
$.ajax({
	type: 'GET', async: false, dataType: 'json',
	url: www + '/VocsDataServer/F_GetPollSourceJson',
	success: function(data){
		var html = '<label for="flt_o_all"><input type="checkbox" id="flt_o_all" class="check_all"  checked />全部</label>';
		for(var i=0;i<data.length;i++){
			aOrigins.push({id:data[i].polls_id,name:data[i].pols_name});
			html += '<label for="flt_o_'+ data[i].pols_id +'"><input type="checkbox" value="'+ data[i].pols_id +'" id="flt_o_'+ data[i].pols_id +'" class="check_list" checked />'+ data[i].pols_name +'</label>';
		}
		$('#flt_o').html(html);
	}
});

// 添加行业类型 复选框
var aIndt = [];
$.ajax({
	type: 'GET', async: false, dataType: 'json',
	url: www + '/VocsDataServer/F_GetIndustryJson',
	success: function(data){
		var html = '<label for="flt_i_all"><input type="checkbox" id="flt_i_all" class="check_all"  checked />全部</label>';
		for(var i=0;i<data.length;i++){
			aIndt.push({id:data[i].indt_id,name:data[i].indt});
			html += '<label for="flt_i_'+ data[i].indt_id +'"><input type="checkbox" value="'+ data[i].indt_id +'" id="flt_i_'+ data[i].indt_id +'" class="check_list" checked />'+ data[i].indt +'</label>';
		}
		$('#flt_i').html(html);
	}
});


// 添加VOCs 种类 复选框
var aVocs = [];
$.ajax({
	type: 'GET', async: false, dataType: 'json',
	url: www + '/VocsDataServer/F_GetPollutantJson',
	success: function(data){
		var html = '<input type="input" id="search_input" placeholder="查找 VOCs"><span id="search_res"></span><br>';
		html += '<label for="flt_v_all" id="flt_v_all_l"><input type="checkbox" id="flt_v_all" class="check_all"  checked />全部</label>';
		for(var i=0;i<data.length;i++){
			aVocs.push({id:data[i].poll_id,name:data[i].poll_chsname});
			html += '<label for="flt_v_'+ data[i].poll_id +'"><input type="checkbox" value="'+ data[i].poll_id +'" id="flt_v_'+ data[i].poll_id +'" class="check_list" checked />'+ data[i].poll_chsname +'</label>';
		}
		html += '<div style="height:248px;"></div>';
		$('#flt_v').html(html);
	}
});

// 年份
var years = {start:2014,end:2017};
(function() {
	var html = '';
	for(var i=0; i<years.end-years.start; i++) {
		html += '<option value="'+ (years.start+i) +'" >' + (years.start+i) + '</option>';
	}
	$('#slt_start').html(html);
	$('#slt_end').html(html);
})();



// ---------------------------------------------------------------------------------------- 更新地图视图
//    ids: [数组] 多个 行政区 编号字符串，用来显示对应图表
// points: [数组] 多个 行政区 边界点数组，用来添加行政区边界
// colors: [数组] 多个 行政区 填充颜色
//    cap: [字符串] 行政区上级行政区，用来每次所有边界添加后调整视野
function updateMap(ids,points,colors,cap){
	map.clearOverlays();
	var bdary = new BMap.Boundary();
	// //调整视野
	bdary.get(cap, function(rs){
		var count = rs.boundaries.length;
		if (count === 0) {console.log('未能获取上级行政区域');return ;}
		var pointArray = [];
		for (var i = 0; i < count; i++) {
			var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 0.1, strokeColor: "rgba(222,0,0,0.1)",fillOpacity: 0.3});
			pointArray = pointArray.concat(ply.getPath());
		}
		map.setViewport(pointArray);
	});

	var count = points.length;  //行政区域的点有多少个
	if (count === 0) {return ;}
	for (var i = 0; i < count; i++) {
		var ply = new BMap.Polygon(points[i], {strokeWeight: 2, strokeColor: "rgba(222,0,0,1)",fillOpacity: 0.3});  //建立多边形覆盖物
		// var ply = new BMap.Polygon(points[i], {strokeWeight: 2, strokeColor: "rgba(222,0,0,1)",fillOpacity: 0.3});  //建立多边形覆盖物
		ply.setId(ids[i]);
		ply.addEventListener('click', showChart);
		map.addOverlay(ply);  //添加覆盖物
	}

}




// 初始化完成 绑定事件
window.onload = function() {

}  // window.onload



// 时间选择联动
$('#slt_start').change(function(){
	var val = parseInt($(this).val());
	// console.log(val);
	var html = '';
	for(var i=0; i<years.end-val; i++) {
		html += '<option value="'+ (val+i) +'" >' + (val+i) + '</option>';
	}
	$('#slt_end').html(html);
});



// ------------------------------------------------------------------------------------------ #filter
// 筛选标题点击事件
$('.flt_title').click(function(){
	$('.filters').slideUp();  // 全部收起
	$(this).next().slideToggle(240);  // 展开标题对应的 .filter
	$('.flt_title').removeClass('hover');  // 对应样式
	$(this).addClass('hover');
});
$( $('.flt_title')[0] ).trigger('click');  // 初始化，展开第一个



// 全选 事件
$('.check_all').click(function(){
	var id = $(this).parent().parent().attr('id');  // 获取所在 .filter 配备的 id
	var check = $('#'+ id + ' .check_all').is(':checked');  // 获取 当前种类是否 全选
	// console.log(check);
	$('#'+ id + ' .check_list').each(function(){ this.checked = check; });  // 将 当前种类 所有 .check_list 选中

	var tip = $('#'+ id+'_tip');  // 更新 选择 状态
	if(check){tip.html('已全选');}else{tip.html('请选择');}
});



// 加载的 复选框的 事件
$('.check_list').click(function(){
	var c = 0;
	var id = $(this).parent().parent().attr('id');  // 获取所在 .filter 配备的 id
	var n = $('#'+ id + ' .check_list').length;  // 当前种类复选框总数（不包括全选框）
	for(var i=0; i<n; i++) {  // 遍历 当前种类 复选框状态
		if($($('#'+ id + ' .check_list')[i]).is(':checked')){ c++; }
	}
	// console.log('num:' + n + ' count:' + c);
	document.getElementById(id+'_all').checked = (c==n);  // 返回 选中个数 与 总数 比对的布尔值；赋给 当前种类 全选框

	var tip = $('#'+ id+'_tip');  // 获取 当前种类 更新选择提示 DOM

	if(c==n){  					// 选中 等于 总数
		tip.html('已全选');
	} else if(c>0) {  			// 选中 大于 0
		tip.html(c + ' 项');
	} else {  					// 未选中
		tip.html('请选择');
	}

});



// vocs 本地检索
$('#search_input').bind('propertychange input',function(){  // 绑定事件

	$('#flt_v').scrollTop(0);  // 先置顶，避免 position().top 获取错误

	var val = $(this).val();  // 获取输入值
	var id = [];
	var index = 0;

	if(val) {
		var patt = new RegExp(val,'gi');
		for(var i=0;i<aVocs.length;i++) {
			if( patt.test(aVocs[i].name) ){
				id.push(aVocs[i].id);
			}
		}
	}

	// console.log(id);
	if(id.length>0) {  // 搜到了

		var top = $('#flt_v_' + id[0]).position().top;

		$('#flt_v').scrollTop(top-148);  // 移动 vocs 滚动条，148 为 #flt_v 顶部到 #filter（最近的 pos:absolute 祖先元素） 的距离
		$('#search_res').html(index+1 + '/' + id.length);

		document.onkeydown = function(evt){  // 回车 定位下一个
			$('#flt_v').scrollTop(0);
			var e = evt || window.event;
			if( e.keyCode == 13 ) {
				index++;
				if(index==id.length){index=0}
				$('#search_res').html(index+1 + '/' + id.length);
				var top = $('#flt_v_' + id[index]).position().top;
				$('#flt_v').scrollTop(top-148);
			}
		};
	 } else {  // 未搜到
	 	$('#search_res').empty();
		document.onkeydown=function(evt){
			var e = evt || window.event;
			if( e.keyCode == 13 ) {return false;}
		}
	 }

});

$('#search_input').blur(function(){  // 失去焦点 清空值
	$(this).val('');
	$('#search_res').empty();
	document.onkeydown=function(evt){
		var e = evt || window.event;
		if( e.keyCode == 13 ) {return false;}
	}
});




// ------------------------------------------------------------------------------------------ 查询
var search_send = true;  // 是否可以发送查询
var options = [];  // chart option
var start,end;
$('#search_btn').click(function(){

	var areaid = $('#slt_area').val().substring(0,6);
	var cap = $('#slt_area').val().substring(6);
	// console.log(cap);
	var gridid = $('#slt_grid').val();
	start = $('#slt_start').val();
	end = $('#slt_end').val();

	if(search_send){
		var arr_o = [];
		var arr_i = [];
		var arr_v = [];

		// 遍历 复选框，保存到各自数组
		$('#flt_o .check_list').each(function(){ if( $(this).is(':checked') ) { arr_o.push( $(this).val() ); } });
		$('#flt_i .check_list').each(function(){ if( $(this).is(':checked') ) { arr_i.push( $(this).val() ); } });
		$('#flt_v .check_list').each(function(){ if( $(this).is(':checked') ) { arr_v.push( $(this).val() ); } });

		if( arr_o.length>0 && arr_i.length>0 && arr_v.length>0 ) {  // 至少选择一项

			$('#search_tip').removeClass('on');  // 消除 查询 提示
			$('#chart_off').trigger('click');  // 隐藏 chart

	// -------------------------------------------------------------------------------------------- Ajax here 
			var points = [];

			var ids = [];


			// 参数判空
			var srcType,industry,polls,addi_id;
			if(arr_o.length != aOrigins.length) { srcType = '&srcType=['  + arr_o +']';} else { srcType = '';}
			if(arr_i.length !=    aIndt.length) {industry = '&industry=[' + arr_i +']';} else {industry = '';}
			if(arr_v.length !=    aVocs.length) {   polls = '&polls=['    + arr_v +']';} else {   polls = '';}
			if(areaid) {addi_id = '&=' + areaid;} else {addi_id = '';}

			$.ajax({
				type: 'GET', async: false, dataType: 'json',
				url:  www + '/VocsDataServer/F_GetVOCsJson?startyear='+ start +'&endyear='+ end + srcType + industry + polls + addi_id,
				// &srcType=[1]&industry=[1]&&polls=[1]&addi_id=510300
				success: function(data){
					console.log(data.length);
					// console.log(this.url);
				}
			});


		// <!-- ajax 地图 start -->
			if(gridid=='0') {  // 网格视图未开启
				if(areaid){
					$.ajax({
						type: 'GET', async: false, dataType: 'json',
						url:  www + '/VocsDataServer/F_GetDistrictJson?code=' + areaid,
						success: function(data){
							for(var i=0;i<data.length;i++){
								points.push(data[i].addi_loc_str);
								ids.push(data[i].addi_id);
							}
							updateMap(ids,points,colors,cap);
						}
					});
				} else {
					updateMap(ids_province,points_province,colors_province,'四川省');
				}
			} else {  // 使用网格视图

				if(areaid){
					com = '?code='+areaid;
				} else {
					com = '';
				}
				
				$.ajax({
					type: 'GET', async: false, dataType: 'json',
					url:  www + '/VocsDataServer/F_GetGridJson' + com,
					success: function(data){
						var points = [];
						var ids = [];
						for(var i=0;i<data.length;i++){
							var arr = eval(data[i].lonlatStr.replace(';',','));
							var str = arr[0]+','+arr[1]+';'+arr[0]+','+arr[3]+';'+arr[2]+','+arr[3]+';'+arr[2]+','+arr[1];
							points.push(str);
							ids.push(data[i].gridID);
						}
						updateMap(ids,points,colors,cap);
					}
				});
			}
			// <!-- ajax 地图 end -->

		// <!-- ajax 图表 start -->
			// 是否显示 chart 的 tab
			if(start==end){

				$('#chart_tab').show();
				options = [
					[
						{
							title : {text: '污染源类型',x:'center'},
							tooltip : {trigger: 'item',formatter: "{b} : {c}吨 ({d}%)"},
							legend: {orient: 'vertical',left: 'left',data: ['固定源','移动源','面源']},
							series : [{
								type: 'pie',radius : '55%',center: ['50%', '60%'],
								data:[{value:335, name:'固定源'},{value:310, name:'移动源'},{value:234, name:'面源'}],
								itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}
							}]
						},
						{
							title : {text: '行业类型',x:'center'},
							tooltip : {trigger: 'item',formatter: "{b} : {c}吨 ({d}%)"},
							legend: {orient: 'vertical',left: 'left',data: ['炼焦及石化','化学原料和..','表面涂装','人造板']},
							series : [{
								type: 'pie',radius : '55%',center: ['50%', '60%'],
								data:[{value:335, name:'炼焦及石化'},{value:310, name:'化学原料和..'},{value:234, name:'表面涂装'},{value:221, name:'人造板'}],
								itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}
							}]
						},
						{
							title : {text: 'VOCs 种类',x:'center'},
							tooltip : {trigger: 'item',formatter: "{b} : {c}吨 ({d}%)"},
							legend: {orient: 'vertical',left: 'left',data: ['苯','甲苯','二甲苯']},
							series : [{
								type: 'pie',radius : '55%',center: ['50%', '60%'],
								data:[{value:32, name:'苯'},{value:310, name:'甲苯'},{value:234, name:'二甲苯'}],
								itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}
							}]
						}
					]
				];

			} else {

				$('#chart_tab').hide();
				options = [
					{
						title: {text: ''},
						tooltip: {trigger: 'axis'},
						legend: {data:['总量']},
						grid: {left: '12px',right: '24px',bottom: '0',top: '36px',containLabel: true},
						xAxis: {type: 'category',boundaryGap: false,data: ['2014','2015','2016']},
						yAxis: {type: 'value'},
						series: [{name:'总量',type:'line',stack: '总量',data:[120, 132, 101]}]
					}
				];

			};


		// <!-- ajax 图表 end -->


			// 查询 按钮状态
			search_send = false;
			$(this).html('查询中，请稍候..');
			setTimeout(function(){
				search_send = true;
				$('#search_btn').html('查询');
			},5000);

		} else { $('#search_tip').addClass('on'); }  // 高亮提示

	}
});



// ------------------------------------------------------------------------------------------ #chart
var option;
function showChart() {
	$('#chart').animate({'left':'0px'},360);

	var id = this.id;
	console.log('行政区ID：'+id);

	// option = options[index];

	if(start==end){
		$($('#chart_tab span')[0]).trigger('click');  // 显示第一个饼图
	} else {
		chart.setOption(options[0],true);
	}

	// $('#chart_name').html(this.name);

};

// chart 隐藏
$('#chart_off').click(function(){
	$('#chart').animate({'left':'-480px'},240);
});


// chart tab 切换
$('#chart_tab span').click(function(){
	$('#chart_tab span').removeClass('on');
	$(this).addClass('on');
	var index = $(this).index();
	chart.setOption(options[0][index],true);
});

</script>
</html>








